<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js上周考1</title>
    <style>
        body {
            background: #333;
            color: #fff;
        }
        
        .wrap {
            height: 100px;
        }
        
        .wrap div {
            float: left;
            height: 60px;
            border: 1px solid #eee;
            line-height: 60px;
            padding: 0 30px;
            margin: 0 20px;
            text-align: center;
            font-size: 20px;
        }
        
        #color li {
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div id="test1">"100"</div>
        <div id="test2">1020</div>
        <div id="test3">"请努力让自己更优秀更出色"</div>
        <div id="test4">true</div>
        <div id="test5">null</div>
    </div>
    <ul id="color">
        <li>string型的颜色<span style="color:#CC0033">#CC0033</span></li>
        <li>number型的颜色<span style="color:#339900">#339900</span></li>
        <li>boolean型的颜色<span style="color:#99CCCC">#99CCCC</span></li>
        <li>null型的颜色<span style="color:#FF9999">#FF9999</span></li>
    </ul>
    <p id="box">请将用户输入的样式应用到P标签上</p>
    <script src="./index.js"></script>

</body>


</html>